// 检测目标元素的可见性
import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    // 定义全局指令
    // 使 v-highlight 在所有组件中都可用
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el:  指令绑定的元素
        // binding: 指令对象，对象中包含有属性如：value、arg、modifiers、dir、vnode、oldValue
        console.log(el, binding)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // target: 监听的元素
          // isIntersecting: 是否进入可视区域
          console.log(isIntersecting)
          if (isIntersecting) {
            // 进入可视区域
            el.src = binding.value
            // 停止监听
            stop()
          }
        })
      },
    })
  },
}
